<template>
	<view>
		<view class="filter-box" :style="{padding: filterPadd}">
			<u-row>
				<u-col :span="filterSpan" v-for="(item, index) in filterList" :key="index">
					<view class="filter-title" @click="openList(index+1)" :style="{color: filter_open==index+1?'#2878ff':'#333333'}">
						<view class="filter-title-word u-line-1">{{item.lable}}</view>
						<view class="filter-title-icon">
							<view class="iconfont" style="font-size: 14px;">&#xe680;</view>
						</view>
					</view>
				</u-col>
				<u-col v-if="filterTime" :span="filterSpan">
					<view class="filter-title" @click="openList(-1)" :style="{color: filter_open==-1?'#2878ff':'#333333'}">
						<view class="filter-title-word u-line-1">日期筛选</view>
						<view class="filter-title-icon">
							<view class="iconfont" style="font-size: 14px;">&#xe680;</view>
						</view>
					</view>
				</u-col>
				<u-col v-if="buttonWord" :span="buttonSize" :offset="buttonMove">
					<u-button :customStyle="{height: '26px'}" color="#2878ff" :text="buttonWord" @click="onFilter(-2)"></u-button>
				</u-col>
			</u-row>
			<view class="filter-down" :style="{height: boxHeight+'px'}">
				<view v-show="filter_open==-1">
					<picker :value="date.start" @change="onStartDate" :end="date.over" mode="date">
						<u-cell size="mini" title="开始日期:" titleStyle="color: #7f7f7f">
							<view slot="value" class="date-box">
								<view style="margin-right: 6rpx;">{{date.start}}</view>
								<u-icon color="#000" name="calendar-fill"></u-icon>
							</view>
						</u-cell>
					</picker>
					<picker :value="date.over" @change="onOverDate" :start="date.start" mode="date">
						<u-cell size="mini" title="结束日期:" titleStyle="color: #7f7f7f">
							<view slot="value" class="date-box">
								<view style="margin-right: 6rpx;">{{date.over}}</view>
								<u-icon color="#000" name="calendar-fill"></u-icon>
							</view>
						</u-cell>
					</picker>
					<view style="padding: 40rpx 40rpx 0;">
						<u-button :customStyle="{height: '70rpx'}" color="#2878ff" @click="onFilter(-1, date)" text="搜索"></u-button>
					</view>
				</view>
				<view class="filter-list" v-for="(item, index) in filterList" :key="index" v-show="filter_open==index+1">
					<view class="filter-item" v-for="row in item.list" :key="row.id" @click="onFilter(index, row)">
						<view :style="{color: row.id==item.id?'#2878ff':'#333333'}">{{row.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-overlay :show="filter_open" duration="100" zIndex="1" @touchmove.stop @click.stop="openList(0)"></u-overlay>
	</view>
</template>

<script>
	export default {
		props: {
			filterList: {
				type: Array,
				default: () => []
			},
			filterSpan: {
				type: String,
				default: '3'
			},
			// 筛选盒子的内边距
			filterPadd: {
				type: String,
				default: '0px'
			},
			// 日期筛选
			filterTime: {
				type: Boolean,
				default: false
			},
			// 按钮尺寸
			buttonSize: {
				type: String,
				default: '2'
			},
			// 按钮位移距离
			buttonMove: {
				type: String,
				default: '0'
			},
			// 按钮文字
			buttonWord: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				filter_open: 0,
				date: { start: '', over: '' }
			}
		},
		options: { styleIsolation: 'shared' },
		computed: {
			boxHeight: function () {
				if(this.filter_open==-1) {
					return 150
				}else if(this.filter_open){
					return this.filterList[this.filter_open-1].list.length*28
				}else{
					return 0
				}
			},
		},
		methods: {
			/* 打开/关闭筛选项 */
			openList(num) {
				if(this.filter_open==num) return (this.filter_open=0)
				this.filter_open = num;
			},
			
			/* 选中筛选项 */
			onFilter(num, row=null) {
				this.$emit('onFilter', num, row);
				this.filter_open = 0;
			},
			
			// 监听日期选择器
			onStartDate({detail: {value}}) {
				this.date.start = value;
			},
			onOverDate({detail: {value}}) {
				this.date.over = value;
			},
		}
	}
</script>

<style scoped>
	.filter-box {
		height: 40px;
		position: relative;
		z-index: 3;
		background-color: #ffffff;
	}
	.filter-title {
		display: flex;
		align-items: center;
		height: 36px;
	}
	.filter-title-word {
		font-size: 14px;
		line-height: 14px;
		height: 14px;
		overflow: hidden;
	}
	.filter-title-icon {
		margin-left: 3px;
		flex: none;
		height: 16px;
		width: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.icon-top {
		font-size: 9px;
		flex: auto;
		transform: rotate(180deg);
	}
	.icon-dow {
		font-size: 9px;
		flex: auto;
	}
	.filter-down {
		position: absolute;
		background-color: #ffffff;
		left: 0px; top: 36px;
		width: 100%;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		transition: height 0.2s;
		overflow: auto;
		max-height: 392px;
	}
	.filter-item>view {
		border-bottom: solid 1px #f2f2f2;
		font-size: 14px;
		line-height: 26px;
		height: 28px;
		padding: 0 20rpx;
	}
	.filter-list .filter-item:last-child>view {
		border: none;
	}
	
	.date-box {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	
	.filter-box ::v-deep .u-col {
		padding: 0 4px !important;
	}
	.filter-box ::v-deep .u-col:first-child {
		padding-left: 0 !important;
	}
	.filter-box ::v-deep .u-col:last-child {
		padding-right: 0 !important;
	}
</style>